<template>
  <main class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-6">Products</h1>

    <div v-if="pending" class="text-center py-8">
      <p>Loading products...</p>
    </div>

    <div v-else class="grid lg:grid-cols-3 gap-4">
      <AppCard v-for="product in products" :key="product.id" class="hover:shadow-lg transition-shadow">
        <h3 class="text-xl font-semibold">{{ product.name }}</h3>
        <p class="text-gray-600">${{ product.price }}</p>
        <NuxtLink :to="`/products/${product.id}`" class="mt-2 inline-block text-blue-500 hover:underline">
          View Details
        </NuxtLink>
      </AppCard>
    </div>

    <div v-if="pageData?.data && pageData.data.length" class="mt-8">
      <!-- 创建按钮 -->
      <button @click="handleCreate">创建新页面</button>

      <!-- 页面列表 -->
      <div v-for="page in pageData?.data" :key="page.page_id" class="page-item">
        <h3>{{ page.title }}</h3>
        <p>{{ page.content[0]?.name }}</p>

        <button @click="handleUpdate(page.page_id)">编辑</button>
        <button @click="handleDelete(page.page_id)">删除</button>
      </div>

      <!-- 分页控制 -->
      <div class="pagination">
        <button @click="currentPage--; refresh()" :disabled="currentPage <= 1">
          上一页
        </button>

        <span>第 {{ currentPage }} 页</span>

        <button @click="currentPage++; refresh()" :disabled="!pageData?.pagination.lastCursor">
          下一页
        </button>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
const { data, pending } = await useFetch('/api/products')
import type { PageListResponse } from '~/types'

definePageMeta({
  layout: 'minimal',
  showHeader: false
});

const products = computed(() => {
  return data.value?.data || []
})


// 引入组合式函数
const {
  getPages,
  createPage,
  updatePage,
  deletePage
} = usePages()

// 当前页码
const currentPage = ref(1)
const pageSize = 10


// 明确指定返回类型
const { data: pageData, refresh } = await useAsyncData<PageListResponse>(
  'pages',
  () => getPages(currentPage.value, pageSize)
)
console.log('Page data:', pageData.value?.data?.[0]?.content)
console.log('pageData data:', pageData.value)

// 提供默认值的计算属性
const pageList = computed(() => pageData.value?.data || [])
const paginationInfo = computed(() => pageData.value?.pagination || {
  total: 0,
  currentPage: 1,
  perPage: 10,
  lastCursor: null
})

// 创建新页面
const handleCreate = async () => {
  const { id } = await createPage({
    title: '新页面',
    content: '内容'
  })
  console.log('创建成功，ID:', id)
  refresh()
}

// 更新页面
const handleUpdate = async (id: number | string) => {
  const { affectedRows } = await updatePage({
    id,
    title: '更新后的标题'
  })
  console.log('更新影响行数:', affectedRows)
  refresh()
}

// 删除页面
const handleDelete = async (id: number | string) => {
  const { affectedRows } = await deletePage(id)
  console.log('删除影响行数:', affectedRows)
  refresh()
}

onMounted(() => {
  // 可以在这里执行一些初始化逻辑
  console.log('Products page mounted')
  // handleCreate()
})

</script>
<style scoped>
.page-item {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
}

.pagination {
  margin-top: 20px;
}
</style>